<template>
    <div class="user-func">
        <div class="func-title">我的功能</div>
        <div class="func-box">
            <div
                class="func-item"
                v-for="(item,index) of funcList"
                :key="index"
                @click="funcClick(item.funcName)"
            >
                <img
                    class="func-img"
                    :src="item.funcImg"
                />
                <div class="func-name">{{item.funcName}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { setTimeout } from 'timers'
export default {
    name: 'UserFunc',
    props: ['userInfo', 'userAccountInfo'],
    data() {
        return {
            funcList: [
                {
                    funcName: '邀请好友',
                    funcImg: require('@/assets/images/userCenter/user-func-1.png')
                },
                {
                    funcName: '我的分享',
                    funcImg: require('@/assets/images/userCenter/user-func-5.png')
                },
                {
                    funcName: '联系方式',
                    funcImg: require('@/assets/images/userCenter/user-func-6.png')
                },
                {
                    funcName: '收货地址',
                    funcImg: require('@/assets/images/userCenter/user-func-7.png')
                },
                {
                    funcName: '我的银行卡',
                    funcImg: require('@/assets/images/userCenter/user-func-8.png')
                },
                {
                    funcName: '关于我们',
                    funcImg: require('@/assets/images/userCenter/user-func-9.png')
                },
                {
                    funcName: '联系客服',
                    funcImg: require('@/assets/images/userCenter/user-func-10.png')
                },
                {
                    funcName: '意见反馈',
                    funcImg: require('@/assets/images/userCenter/user-func-11.png')
                }
            ]
        }
    },
    mounted() {
        const that = this
        if (this.userInfo) {
            this.getEasemobimConfig()
            this.getFunc()
        } else {
            setTimeout(() => {
                that.getEasemobimConfig()
                that.getFunc()
            }, 500)
        }
    },
    methods: {
        getEasemobimConfig() {
            const that = this
            if (this.userInfo) {
                window.easemobim = window.easemobim || {}
                easemobim.config = {
                    hide: true,
                    autoConnect: true,
                    hideKeyboard: true,
                    visitor: {
                        trueName: this.userInfo.nick_name,
                        phone: this.userInfo.mobile_phone,
                        userNickname: this.userInfo.id
                    }
                }
            } else {
                setTimeout(() => {
                    that.getEasemobimConfig()
                }, 500)
            }
        },
        getFunc() {
            const that = this
            if (this.userInfo) {
                if (this.userInfo.vip_level == 2) {
                    this.funcList.splice(
                        1,
                        0,
                        {
                            funcName: '升级申请',
                            funcImg: require('@/assets/images/userCenter/user-func-2.png')
                        },
                        {
                            funcName: '授权中心',
                            funcImg: require('@/assets/images/userCenter/user-func-3.png')
                        },
                        {
                            funcName: '授权申购',
                            funcImg: require('@/assets/images/userCenter/user-func-4.png')
                        }
                    )
                } else if (this.userInfo.vip_level == 3) {
                    this.funcList.splice(
                        1,
                        0,
                        {
                            funcName: '升级申请',
                            funcImg: require('@/assets/images/userCenter/user-func-2.png')
                        },
                        {
                            funcName: '授权中心',
                            funcImg: require('@/assets/images/userCenter/user-func-3.png')
                        },
                        {
                            funcName: '授权申购',
                            funcImg: require('@/assets/images/userCenter/user-func-4.png')
                        }
                    )
                } else if (this.userInfo.vip_level == 4) {
                    this.funcList.splice(
                        1,
                        0,
                        {
                            funcName: '授权中心',
                            funcImg: require('@/assets/images/userCenter/user-func-3.png')
                        },
                        {
                            funcName: '授权申购',
                            funcImg: require('@/assets/images/userCenter/user-func-4.png')
                        }
                    )
                }
            } else {
                setTimeout(() => {
                    that.getFunc()
                }, 500)
            }
        },
        funcClick(index) {
            switch (index) {
                case '邀请好友':
                    this.$emit('shareShow')
                    break
                case '升级申请':
                    this.$router.push('/joinUs/typeSelect')
                    break
                case '授权中心':
                    this.$router.push('/attorneyList')
                    break
                case '授权申购':
                    this.$router.push('/agentTimes')
                    break
                case '联系方式':
                    this.$router.push('/agentInfo')
                    break
                case '收货地址':
                    this.$router.push({
                        path: '/address',
                        query: { addressType: 'readonly' }
                    })
                    break
                case '我的银行卡':
                    if (
                        this.userInfo.mobile_phone == null ||
                        this.userInfo.mobile_phone == ''
                    ) {
                        this.$emit('goBindPhone')
                    } else {
                        this.$router.push('/myCard')
                    }
                    break
                case '关于我们':
                    this.$router.push('/about')
                    break
                case '联系客服':
                    easemobim.bind({
                        configId: 'c490fa9c-6496-48ea-992a-667f779852ae'
                    })
                    break
                case '意见反馈':
                    this.commonDialog.alert('提示', '即将开放，敬请期待！')
                    break
                case '我的分享':
                    this.$router.push('/socialSystem/myArtical')
                    break
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.user-func
    margin-top 0.18rem
    padding 0.4rem 0
    background #fff
    .func-title
        padding 0 0.34rem
        font-weight bold
        font-size 0.37rem
        color #131313
        line-height 1
    .func-box
        display flex
        flex-wrap wrap
        margin-top 0.58rem
        .func-item
            width 25%
            text-align center
            margin-bottom 0.67rem
            .func-img
                width 0.72rem
            .func-name
                font-size 0.34rem
                color #333
                margin-top 0.48rem
</style>


